<template lang="html" class='container'>
  <div class="lead">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index" class='swiperimg'>
        <img class='lead-swiper' :src="slide" alt="">
        <router-link  class='tiyan' tag='div' to='/index'></router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

  export default {
    name:"Lead",
    data(){
      return{
        swiperSlides:[
          require('../../assets/img/bootpage01.png'),
          require('../../assets/img/bootpage02.png'),
          require('../../assets/img/bootpage03.png')
        ],
        //轮播图配置
        swiperOption:{
           // 如果需要分页器
           pagination: {
             el: '.swiper-pagination',
           },
            autoplay:true,
            loop:true
        }
      }
    },
    components:{
        swiper,
        swiperSlide
    }

  }

</script>

<style lang="css" scoped>
.lead-swiper{
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    display: block;
}
.swiperimg{
  position: relative;
  min-height: inherit;
}
.tiyan {
  position: absolute;
  top:11.8rem;
  left:2.2rem;
  width: 3rem;
  height:0.7rem;
  background-color: inherit;
  border: 0;
  cursor: pointer;
}
.swiper-pagination{
  bottom: -79px;
  left: 0;
  width: 100%;
  padding-bottom: 101px;
  height: 15px;
  line-height: 15px;
  /* bottom:0;*/
}

</style>
